<template>
	<template v-for="(subItem, index) in menuList" :key="subItem.path">
		<el-sub-menu class="menu-list" v-if="subItem.children && subItem.children.length > 0" :index="String(index + subItem.path)">
			<template #title>
				<el-icon>
					<component :is="subItem.meta.icon"></component>
				</el-icon>
				<span class="ellipsis-on-hover">{{ subItem.meta.title }}</span>
			</template>
			<component :is="SubMenu" :menuList="subItem.children"></component>
		</el-sub-menu>
		<el-menu-item v-else :index="String(subItem.path)" @click="handleClickMenu(subItem)">
			<el-icon>
				<component :is="subItem.meta.icon"></component>
			</el-icon>
			<template #title>
				<span class="ellipsis-on-hover">{{ subItem.meta.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { AuthStore } from '@/stores/modules/auth';
import SubMenu from './SubMenu.vue';
defineProps<{ menuList: Menu.MenuOptions[] }>();
const router = useRouter();
const authStore = AuthStore();
const handleClickMenu = (subItem: Menu.MenuOptions) => {
	const path: string = subItem.path as string;
	const name = subItem.name;
	if (!authStore.keepAliveRouter.includes(name)) {
		authStore.setKeepAliveRouter(name);
	}
	router.push(path);
};
</script>
<style>
/* .menu-list {
	.el-menu-item,
	.el-sub-menu__title {
		height: 42px;
		line-height: 42px;
		border-bottom: 1px solid #105aaf;
	}
	&.is-active .el-sub-menu__title {
		border: none;
	}
} */
.ellipsis-on-hover {
	/* max-width: 200px; */
	overflow: hidden;
	line-height: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ellipsis-on-hover:hover {
	overflow: visible;
	white-space: normal;
}

/* 为了美观，可以隐藏多余的空白 */
.ellipsis-on-hover:hover::after {
	content: '';
}
</style>
